<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
            // 创建场景对象
			const scene = new THREE.Scene();
            /* 创建网络模型 为了真正能够让你的场景借助three.js来进行显示，
            我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。*/
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			const renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xffffff,1.0);

			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			const geometry = new THREE.BoxGeometry();
			const material = new THREE.MeshBasicMaterial( { color: 0245255 } );
			const cube = new THREE.Mesh( geometry, material );  // 网络模型对象cube
			scene.add( cube ); // 网络模型添加到场景中
            console.log(scene);

            // 光照设置
            var point = new THREE.PointLight(0xffffff)
            point.position.set(400, 200, 300) // 点光源位置
            // 通过add方法插入场景中，不插入的话，渲染的时候不会获取光源的信息进行光照计算
            scene.add(point)
            // 环境光 环境光颜色与网格模型的颜色进行rgb进行乘法运算
            var ambient = new THREE.AmbientLight(0x222222)
            scene.add(ambient)


			camera.position.z = 5;

			const animate = function () {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>